<template>
  <div>
    <Row type="flex" class="common_window_top" align="middle" justify="start">
      <Col span="4">
        <div>
            <span class="title">
              <Icon type="ios-book" size="45"/>字典类型</span>
        </div>
      </Col>
      <Col span="20">
        <div style="float: right">
          <Form ref="" label-position="right" :label-width="65" inline>
            <FormItem label="类型名称:" >
              <Input type="text" placeholder="字典类型名称" v-model="parameters.dictName"/>
            </FormItem>
            <FormItem label="字典类型:">
              <Input type="text" placeholder="字典类型" v-model="parameters.dictType"/>
            </FormItem>
            <FormItem :label-width="0">
              <Button type="primary" @click="findButton">查询</Button>
            </FormItem>
            <FormItem :label-width="0" style="margin-left: 10px;">
              <Button type="success" @click="addDictTypeButton">新增</Button>
            </FormItem>
          </Form>
        </div>
      </Col>
    </Row>
    <br>
    <Row class="common_window_down">
      <Col span="24">
        <Table border :columns="dictTypeColumn" :data="dictTypeList"></Table>
        <Page :current="parameters.current" :total="total" :page-size="parameters.size"  @on-change="changePageCurrent" @on-page-size-change="changePageSize" show-sizer show-elevator show-total></Page>
      </Col>
    </Row>

    <Modal v-model="addOrUpdteDictType.isShow" :title="addOrUpdteDictType.parameters.id ? '修改用户' : '新增用户'">
      <Form ref="formValidate" :model="addOrUpdteDictType.parameters" :rules="addOrUpdteDictType.ruleValidate" label-position="right" :label-width="65" inline>
        <Row :gutter="3">
          <Col span="12">
            <FormItem label="类型名称:" prop="dictName">
              <Input v-model="addOrUpdteDictType.parameters.dictName" type="text" placeholder="请输入..." />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="字典类型:" prop="dictType">
              <Input v-model="addOrUpdteDictType.parameters.dictType" :disabled="addOrUpdteDictType.parameters.id" type="text" placeholder="请输入..."/>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="3">
          <Col span="24">
          <FormItem label="描述:" prop="remark">
            <Input v-model="addOrUpdteDictType.parameters.remark" style="width: 235%" type="textarea" :rows="2" placeholder="请输入..."/>
          </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="primary" size="large" :loading="addOrUpdteDictType.loading" @click="sendDictType">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {pageDictType,addDictType,updateDictType,deleteDictType} from "../../../api/sys/system/sysDict";
  import {mapState,mapMutations} from "vuex";
  export default {
    name : 'sysSystemDict',
    computed : {
      ...mapState(['dictObject','dictArray'])
    },
    data () {
      return {
        dictTypeList : [],
        dictTypeColumn : [
          {title : '类型名称',key : 'dictName',align : 'center',tooltip : true},
          {title : '字典类型',key : 'dictType',align : 'center',tooltip : true},
          {title : '描述',key : 'remark',align : 'center',tooltip : true},
          {title : '更新时间',key : 'updatedTime',align : 'center',tooltip : true},
          {title : '操作',align : 'center',minWidth : 290,maxWidth : 290,render : (h,parame) =>{
              var buttons = [];
              buttons.push(h('Button',{
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on : {
                  click : ()=>{
                    this.changeCurrentView({url:"/main/sysSystemDictData",title : '字典数据管理',parame : parame.row.dictType})
                  }
                }
              },'查看数据'));
              buttons.push(h('Button',{
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on : {
                  click : ()=>{
                    this.addOrUpdteDictType.isShow = true;
                    this.addOrUpdteDictType.parameters.id = parame.row.id;
                    this.addOrUpdteDictType.parameters.dictName = parame.row.dictName;
                    this.addOrUpdteDictType.parameters.dictType = parame.row.dictType;
                    this.addOrUpdteDictType.parameters.isSys = parame.row.isSys;
                    this.addOrUpdteDictType.parameters.remark = parame.row.remark;
                  }
                }
              },'修改'));
              buttons.push(h('Button',{
                props: {
                  type: 'error',
                  size: 'small'
                },
                on : {
                  click : ()=>{
                    this.deleteData(parame.row.id);
                  }
                }
              },'删除'));
              return h('div',{},buttons)
            }}
        ],
        total : 0,
        parameters : {
          current : 1,
          size : 10,
          dictName : null,
          dictType : null,
        },
        addOrUpdteDictType :{
          isShow : false,
          loading : false,
          parameters : {
            id : null,
            dictName : null,
            dictType : null,
            remark : null,
          },
          ruleValidate : {
            dictName : { required: true, message: '必填！', trigger: 'change' },
            dictType : { required: true, message: '必填！', trigger: 'change' },
          }
        }
      }
    },
    mounted(){
      this.findButton();
    },
    methods : {
      ...mapMutations(['changeCurrentView']),
      findButton(){
        this.parameters.current = 1;
        this.findDictTypes();
      },
      findDictTypes(){
        pageDictType(this.parameters).then(result=>{
          var data = result.data;
          if(data){
            this.parameters.current = data.current;
            this.total = data.total;
            this.dictTypeList = data.records;
          }
        });
      },
      addDictTypeButton(){
        this.addOrUpdteDictType.isShow = true;
        this.addOrUpdteDictType.parameters.id = null;
        this.$refs['formValidate'].resetFields();
      },
      sendDictType(){
        this.$refs['formValidate'].validate(valid=>{
          this.addOrUpdteDictType.loading = true;
          if(valid){
            if(this.addOrUpdteDictType.parameters.id){
              //修改
              updateDictType(this.addOrUpdteDictType.parameters.id,this.addOrUpdteDictType.parameters).then(result=>{
                  this.$Message.success('修改成功！');
                  this.addOrUpdteDictType.isShow = false;
                  this.addOrUpdteDictType.loading = false;
                  this.findDictTypes();
              },error=>{
                console.info(error);
                this.addOrUpdteDictType.loading = false;
              });
            }else{
              //新增
              addDictType(this.addOrUpdteDictType.parameters).then(result=>{
                  this.$Message.success('新增成功！');
                  this.addOrUpdteDictType.isShow = false;
                  this.addOrUpdteDictType.loading = false;
                  this.findDictTypes();
              },error=>{
                console.info(error);
                this.addOrUpdteDictType.loading = false;
              });
            }
          }else{
            this.addOrUpdteDictType.loading = false;
          }
        });
      },
      deleteData(id){
        deleteDictType(id).then(result=>{
          this.$Message.success('操作成功！');
          this.findDictTypes();
        });
      },
      changePageCurrent(current){
        this.parameters.current = current;
        this.findDictTypes();
      },
      changePageSize(size){
        this.parameters.size = size;
        this.findDictTypes();
      },
    }
  }
</script>

<style scoped>
</style>
